<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排行榜</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/module/appendID.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/reqAlbum.js"></script>
    <link rel="stylesheet" href="./css/common/reset.css">
    <!-- <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/common/albumDetail.css">
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <main>
        <div class="g-bd4 f-cb">

            <div class="g-mn4">
                <div class="g-mn4c">
                    <div class="g-wrap6">
                        <div class="m-info f-cb">
                            <script type="text/html" id="mInfo">
                            <div class="cover u-cover u-cover-alb">
                                <img class="j-img"
                                    src="{{ data.coverImgUrl}}" style="height: 176px;"> 
                                <span class="msk"></span>
                            </div>
    
                            <div class="cnt">
                                <div class="cntc">
                                    <div class="topblk">
                                        <div class="hd f-cb">
                                            <i class="f-fl u-icn u-icn-16"></i>
                                            <div class="tit">
                                                <h2 class="f-ff2">{{ data.name }}</h2>
                                            </div>
                                        </div>
                                        <p class="intr">
                                            <b style="width: 35px;height:35px;"><img src="{{ data.creator.avatarUrl }}" alt="" style="width: 35px;height: 35px;"></b>
                                            <span> <a class="s-fc7">{{ data.creator.nickname }}</a></span>
                                        </p>
                                        <p class="intr"><b>生日</b> {{ data.creator.birthday }}</p>
                                    </div>
                                    <div class="btns f-cb">
                                        <a class="u-btn2 u-btn2-2 u-btni-addply f-fl" hidefocus="true" title="播放">
                                            <i><em class="ply"></em>播放</i></a>
                                        <a class="u-btni u-btni-add" hidefocus="true" title="添加到播放列表"></a>
                                        <a class="u-btni u-btni-fav "><i>收藏</i></a>
                                        <a class="u-btni u-btni-share"><i>({{ data.subscribedCount}})</i></a>
                                        <a class="u-btni u-btni-dl " href="javascript:;"><i>下载</i></a>
                                        <a class="u-btni u-btni-cmmt"><i>(<span>{{ data.commentCount }}</span>)</i></a>
                                    </div>
                                </div>
                            </div>
                        </script>
                        </div>

                        <div class="n-albdesc">
                            <script type="text/html" id="nAlbdesc">
                                <h3>歌单介绍：</h3>
                                    <div id="album-desc-dot" class="f-brk">
                                        <p>{{ data.description }}</p>
                                    </div>
                                    <!-- <div class="f-cb">
                                        <a href="#" class="s-fc7 f-fr">展开<i class="u-icn u-icn-69"></i></a>
                                    </div> -->
                            </script>
                        </div>
                        <div class="n-songtb">
                            <script type="text/html" id="nSongtb">
                                <div class="u-title u-title-1 f-cb">
                                    <h3><span class="f-ff2">包含歌曲列表</span></h3>
                                    <span class="sub s-fc3">{{ data.trackCount }}首歌</span>
                                </div>
                            </script>
                        </div>





                        <div class="j-flag">
                            <table class="m-table m-table-album">
                                <thead>
                                    <tr>
                                        <th class="first w1">
                                            <div class="wp">&nbsp;</div>
                                        </th>
                                        <th>
                                            <div class="wp">歌曲标题</div>
                                        </th>
                                        <th class="w2-1">
                                            <div class="wp">时长</div>
                                        </th>
                                        <th class="w4">
                                            <div class="wp">歌手</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="jFlag">
                                    <script type="text/html" id="tableTpl">
                                    {{ each data item index }}
                                        <tr class="even ">
                                            <td class="left">
                                                <div class="hd ">
                                                    <span class="ply ">&nbsp;</span>
                                                    <span class="num">1</span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="f-cb">
                                                    <div class="tt">
                                                        <div class="ttc"><span class="txt">
                                                                <a href="#"><b>{{ item.al.name }}</b></a>
                                                                <span class="mv">MV</span></span></div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class=" s-fc3"><span class="u-dur ">{{ item.dt | dateTimeFormat}}</span>
                                                <div class="opt hshow"><a class="u-icn u-icn-81 icn-add"></a>
                                                    <span class="icn icn-fav" title="收藏"></span>
                                                    <span class="icn icn-share" title="分享">分享</span>
                                                    <span class="icn icn-dl" title="下载"></span>
                                                </div>
                                            </td>
                                            <td class="">
                                                <div class="text">
                                                    <span><a class="" href="#"><img src="{{ item.al.picUrl }}" alt="" style="width: 25px;height: 25px;"></a>
                                                    </span>
                                                </div>
                                            </td>
                                        </tr>
                                    {{ /each }}
                                </script>
                                </tbody>
                            </table>
                        </div>
                        <div class="j-flag"></div>


                    </div>
                </div>
            </div>

            <div class="g-sd4">
                <div class="g-wrap7">

                    <h3 class="u-hd3">
                        <span class="f-fl">Ta的其他热门专辑</span>
                        <a href="#" class="more f-ff1 s-fc3">全部&gt;</a>
                    </h3>

                    <ul class="m-more">
                        <li>
                            <a class="cver ">
                                <img
                                    src="http://p1.music.126.net/kkO6WvKl9glH6zsOMXInbg==/109951166217866962.jpg?param=50y50">

                            </a>

                            <div class="info">
                                <p class="f-thide"><a class="sname" href="#">无双的王者</a></p>
                                <p class="f-time">2021-07-27</p>
                            </div>
                        </li>

                        <li>
                            <a class="cver ">
                                <img
                                    src="http://p1.music.126.net/kkO6WvKl9glH6zsOMXInbg==/109951166217866962.jpg?param=50y50">

                            </a>

                            <div class="info">
                                <p class="f-thide"><a class="sname" href="#">无双的王者</a></p>
                                <p class="f-time">2021-07-27</p>
                            </div>
                        </li>

                        <li>
                            <a class="cver ">
                                <img
                                    src="http://p1.music.126.net/kkO6WvKl9glH6zsOMXInbg==/109951166217866962.jpg?param=50y50">

                            </a>

                            <div class="info">
                                <p class="f-thide"><a class="sname" href="#">无双的王者</a></p>
                                <p class="f-time">2021-07-27</p>
                            </div>
                        </li>

                    </ul>

                </div>
            </div>
        </div>
    </main>
    <!-- footer页面 -->
    <footer></footer>
</body>

</html>